<template>
<div>
    <el-container>
        <el-header>
            <div>运营支撑</div>
            <span style="cursor: pointer; display: flex; align-items: center">
                <!-- 可选：添加用户图标 -->
                <!-- <span class="el-avatar el-avatar--circle">
                    <img :src="avator" style="object-fit: cover" />
                </span> -->
                <span class="el-avatar el-avatar--circle" style="margin-left: 10px" v-if="avatarurl != ''">
                    <img :src="avatarurl" style="object-fit: cover" />
                </span>

                <span style="font-size :18px;">当前用户：{{ uname }}</span>

                <el-dropdown @command="handleCommand">
                    <i class="el-icon-setting" style="margin-right: 15px;margin-left: 15px;margin-top: 7px;"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
            <!-- </el-dropdown> -->
        </el-header>
        <el-container style="height: 620px; border: 2px solid #eee">
            <el-aside>
                <el-row>
                    <el-col>
                        <el-menu default-active="/first" class="el-menu-vertical-demo" :router="isIndex">
                            <el-menu-item index="/first">首页</el-menu-item>
                            <el-submenu v-for="pmenu in menus" :key="pmenu.pid" :index="pmenu.pid">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{ pmenu.pname }}</span>
                                </template>
                                <!-- 二级菜单 -->
                                <el-menu-item v-for="smenu in pmenu.subMenuList" :key="smenu.sid" :index="smenu.spath">
                                    {{ smenu.sname }}
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
    <change-pwd :changePwdCtrl="changePwdController" @success="quit"></change-pwd>
</div>
</template>

<script>
import ChangePwd from "@/components/ChangePwd.vue";

export default {
    components: {
        ChangePwd
    },
    name: "Menus",
    data() {
        return {
            isIndex: true,
            uname: "",
            menus: [],
            changePwdController: false,
            avatarurl: ''
        };
    },
    methods: {
        getMenus() {
            this.$http.get('/getMenus?userid=' + localStorage.getItem('userid')).then(res => {
                debugger
                this.menus = res.data
            })
        },
        quit() {
            localStorage.clear()
            this.$router.push('/')
        },
        handleCommand(command) {
            if (command == 'changePwd') {
                this.changePwdController = !this.changePwdController
            } else if (command == 'logout') {
                this.quit()
            }
        },
        getAvatar() {
            this.$http.get("/getAvatar?userid=" + localStorage.getItem('userid')).then(res => {

                this.avatarurl = res.data
            })
        }
    },
    mounted() {
        this.uname = localStorage.getItem("ename");
        this.getMenus()
        this.getAvatar()
    },
};
</script>

<style>
.el-header {
    background-color: #373d41;
}

.el-main {
    background-color: #eaedf1;
}

.el-container {
    height: 100%;
}

/*头部样式*/
.el-header {
    background-color: #6cbcf0;
    display: flex;
    /*左右贴边*/
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 30px;
}

.el-header>div {
    display: flex;
    align-items: center;
}

.el-header>div>span {
    cursor: pointer;
}

.el-header span {
    margin-left: 15px;
}
</style>
